<template>
    <div class="app-container">

        <el-card class="box-card">

            <!-- 返回按钮 -->
            <el-button type="primary" size="small" @click="returnPrev" class="add-button mb20">返回</el-button>

            <div class="wrapper mb60">
                <div class="fwb fs18 mb20">水机基本信息</div>
                <div class="pl10">
                    <div class="fs16 fwb mb10">水机名称：{{ infoData.title }}【{{ infoData.code }}】</div>
                    <div class="flex flex-ver mb12">
                        <div class="mr30">所属区片：{{ infoData.community_info ? infoData.community_info.title : '' }}</div>
                    </div>
                    <div class="flex flex-ver mb12">
                        <div class="mr30">地址：{{ infoData.address}}</div>
                    </div>
                    <div class="flex flex-ver">
                        <div>签约日期：</div>
                        <div>
                            <el-date-picker v-model="infoData.signed_at" value-format="yyyy-MM-dd HH:mm:ss"
                                            :disabled="signDisabled" type="datetime" placeholder="请选择签约日期">
                            </el-date-picker>
                        </div>
                        <div class="color ml20 cursor" v-if="!signDisabled" @click="selectTime">确认</div>
                    </div>
                    <div class="flex mb20">
                        <div class="flex flex-ver">
                            <div>到期时间：</div>
                            <div>
                                <el-date-picker v-model="infoData.end_signed" value-format="yyyy-MM-dd HH:mm:ss"
                                                :disabled="signDisabledEnd" type="datetime" placeholder="请选择签约到期日期">
                                </el-date-picker>
                            </div>
                            <div class="color ml20 cursor" v-if="!signDisabledEnd" @click="selectTimeEnd">确认</div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="wrapper mb60">
                <div class="mb30 fwb fs16 mb10">费用信息</div>
                <div class="tem mb24">
                    <div class="flex mb8">
                        <div class="mr12" style="width:50px;">物业费</div>
                        <div class="color cursor" @click="searchRecord('property_fee')" v-if="propertyFeeDisabled">查看记录
                        </div>
                    </div>
                    <div class="flex flex-ver">
                        <el-input class="w200 mr10" size="mini" :disabled="propertyFeeDisabled"
                                  v-model="infoData.price.property_fee" placeholder="请输入物业费金额" />
                        <div class="mr30">元/年</div>
                        <div class="cursor color" v-if="!propertyFeeDisabled"
                             @click="confirmSave('property_fee', '请输入物业费金额')">确认</div>
                    </div>
                </div>

                <div class="tem mb24">
                    <div class="flex mb8">
                        <div class="mr12" style="width:50px;">水费</div>
                        <div class="color cursor" v-if="waterRateDisabled" @click="searchRecord('water_rate')">查看记录
                        </div>
                    </div>
                    <div class="flex flex-ver">
                        <el-input class="w200 mr10" size="mini" :disabled="waterRateDisabled"
                                  v-model="infoData.price.water_rate" placeholder="请输入水费金额" />
                        <div class="mr30">元/年</div>
                        <div class="cursor color" v-if="!waterRateDisabled"
                             @click="confirmSave('water_rate', '请输入水费金额')">确认</div>
                    </div>
                </div>

                <div class="tem mb24">
                    <div class="flex mb8">
                        <div class="mr12" style="width:50px;">电费</div>
                        <div class="color cursor" @click="searchRecord('electricity')" v-if="electricityDisabled">查看记录
                        </div>
                    </div>
                    <div class="flex flex-ver">
                        <el-input class="w200 mr10" size="mini" :disabled="electricityDisabled"
                                  v-model="infoData.price.electricity" placeholder="请输入电费金额" />
                        <div class="mr16">元/季度</div>
                        <div class="cursor color" v-if="!electricityDisabled"
                             @click="confirmSave('electricity', '请输入电费金额')">确认</div>
                    </div>
                </div>
            </div>
        </el-card>


        <el-dialog width="550px" :visible.sync="dialogVisible" title="绑定用户" center custom-class="dialog-header-bg">

            <el-form ref="role" :model="role" :rules="rules" label-width="100px">
                <el-form-item label="绑定用户：" prop="type">
                    <el-select v-model="role.buy_user_id" placeholder="请选择绑定客户" size="small" >
                        <el-option v-for="(item, index) in userSelectList" :key="index" :label="item.nickname"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <div class="bottom-btn-group ac mt50">
                <el-button type="primary" class="dialog-button" @click="operateCommunity('role')">确定</el-button>
                <el-button type="primary" class="dialog-button cancel-button"
                           @click="dialogVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <el-dialog width="550px" :visible.sync="dialogVisibleTable"
                   :title="recordType == 'property_fee' ? '物业费记录' : recordType == 'water' ? '水费记录' : '电费记录'" center
                   custom-class="dialog-header-bg">
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column label="时间" align="center">
                    <template slot-scope="scope">{{ scope.row.started_at }} ~ {{ scope.row.ended_at }}</template>
                </el-table-column>
                <el-table-column prop="price" label="金额（元)" align="center">
                </el-table-column>
            </el-table>

        </el-dialog>
    </div>
</template>

<script>
import { getApparatusDetail, apparatusUserBind, electricLogs, waterRateLogs, propertyFeeLogs, apparatusUserSign, setPropertyFee, setElectricity, setWaterRate } from "@/api/grzq/apparatus.js";

import waves from '@/directive/waves';
import {getFormatDate, parseTime} from "@/utils";


export default {
    name: 'articleManage',
    components: {},
    directives: {waves},
    filters: {

    },
    data() {
        return {
            electricityDisabled: false,
            propertyFeeDisabled: false,
            waterRateDisabled: false,
            signDisabled: false,
            signDisabledEnd: false,
            apparatus_id: '',
            infoData: {
                signed_at: '',
                end_signed: '',
                user_info: {
                    id: '',
                    nickname: '',
                },
                price: {
                    electricity: '',
                    property_fee: '',
                    water_rate: '',
                }
            },
            dialogVisibleTable: false,
            tableData: [],
            recordType: '',
            rules: {
                // type: [{ required: true, message: "请选择用户", trigger: "change" }],
                buy_user_id: [{ required: true, message: "请选择用户", trigger: "change" }],
            },
            dialogVisible: false,
            role: {},
            userSelectList:{}
        }
    },
    async created() {
        this.apparatus_id = this.$route.query && this.$route.query.id;
        await this.getInfo();
        // 文章列表
    },
    methods: {
        async getInfo() {
            let that = this;
            const res = await getApparatusDetail({"id": that.apparatus_id });
            that.infoData = res.data;

            that.signDisabled = that.infoData.signed_at ? true : false;
            that.signDisabledEnd = that.infoData.end_signed ? true : false;
            that.propertyFeeDisabled = that.infoData.price.property_fee > 0 ? true : false;
            that.waterRateDisabled = that.infoData.price.water_rate > 0 ? true : false;
            that.electricityDisabled = that.infoData.price.electricity > 0 ? true : false;

            that.infoData.price.property_fee = that.infoData.price.property_fee > 0 ? that.infoData.price.property_fee : '';
            that.infoData.price.water_rate = that.infoData.price.water_rate > 0 ? that.infoData.price.water_rate : '';
            that.infoData.price.electricity = that.infoData.price.electricity > 0 ? that.infoData.price.electricity : '';
        },
        async searchRecord(type) {
            let that = this;
            that.recordType = type;
            that.dialogVisibleTable = true;
            let res;
            switch (type) {
                case 'property_fee':
                    //请求物业费保存接口
                    res = await propertyFeeLogs({ "id": that.apparatus_id});
                    break;
                case 'water_rate':
                    //请求水费保存接口
                    res = await waterRateLogs({ "id": that.apparatus_id });
                    break;
                case 'electricity':
                    //请求电费保存接口
                    res = await electricLogs({"id": that.apparatus_id});
                    break;
            }
            that.tableData = res.data;
        },
        async confirmSave(type, content) {
            let that = this;
            if (!this.infoData.price[type]) {
                this.$message.error(content);
                return;
            }
            let res;
            switch (type) {
                case 'property_fee':
                    res = await setPropertyFee({ "id": that.apparatus_id, price: that.infoData.price.property_fee });
                    this.propertyFeeDisabled = true;
                    break;
                case 'water_rate':
                    res = await setWaterRate({ "id": that.apparatus_id, price: that.infoData.price.water_rate });
                    this.waterRateDisabled = true;
                    break;
                case 'electricity':
                    res = await setElectricity({ "id": that.apparatus_id, price: that.infoData.price.electricity });
                    this.electricityDisabled = true;
                    break;
            }
            this.$message({
                type: "success",
                message: "操作成功!",
            });
        },
        async bindUser() {
            let that = this;
            this.role = {"id": that.apparatus_id };
            this.dialogVisible = true;
            this.UsersSelectlist();

        },
        async selectTime() {
            let that = this;
            if (!this.infoData.signed_at) {
                this.$message.error("请选择签约日期");
                return;
            }
            const res = await apparatusUserSign({ "id": that.apparatus_id, signed_at: this.infoData.signed_at });
            this.signDisabled = true;
            this.$message({
                type: "success",
                message: "操作成功!",
            });

        },
        async selectTimeEnd() {
            let that = this;
            if (!this.infoData.end_signed) {
                this.$message.error("请选择签约到期日期");
                return;
            }
            const res = await apparatusUserSign({ "id": that.apparatus_id, end_signed: this.infoData.end_signed });
            this.signDisabledEnd = true;
            this.$message({
                type: "success",
                message: "操作成功!",
            });

        },
        returnPrev() {
            this.$router.go(-1);
        },

        operateCommunity(formName) {
            let that = this;
            this.$nextTick(function () {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        const res = await apparatusUserBind(that.role);
                        this.dialogVisible = false;
                        this.$message({
                            type: "success",
                            message: "操作成功!",
                        });
                        await this.getInfo();
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            });
        },

    }
}
</script>

<style scoped>
img{
    width: 100%;
}
.edit-input {
    padding-right: 100px;
}

.cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}
</style>
